<template>
  <div class="todo">
    <div class="p">todos</div>
    <div class="todolist">
      <div class="top">
        <span class="xuanzhuan" v-show="data.flag" >></span>
        <input
          type="text"
          name=""
          id=""
          v-model="data.value"
          placeholder="What needs to be done?"
          @keyup.enter="add"
        />
      </div>
      <div class="msg" v-show="data.flag">
        <div
          class="content"
          v-for="(item, i) in data.list"
          @mousemove="move"
          @mouseout="out"
        >
          <div>
            <input
              type="checkbox"
              v-model="item.flag"
              @change="ck(i)"
              :checked="item.flag"
            />
            <label for="" v-if="item.flag == false">{{ item.value }}</label>
            <s v-else>{{ item.value }}</s>
          </div>
          <span v-show="data.flag1" @click="del(i)">X</span>
        </div>
        <div class="bottom">
          <p>{{data.numList.length}}item left</p>
          <div class="right">
            <button class="btn">All</button>
            <p class="active">Active</p>
            <p>Completed</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
const data = reactive({
  list: [],
  flag: false,
  value: "",
  flag1: false,
  numList:[]
});
const add = (e) => {
  console.log(data.value);
  if (data.value == "") {
    alert("不能添加");
  } else {
    data.flag = true;
    let index = data.list.findIndex((item) => {
      return item.value == data.value;
    });
    if (index == -1) {
      data.list.push({ value: data.value, flag: false });
    } else {
      alert("不能重复添加");
    }
  }
};

const move = () => {
  data.flag1 = true;
};
const out = () => {
  data.flag1 = false;
};
const ck = (i) => {
  console.log(i);
  data.list[i].flag != data.list[i].flag;
  console.log(data.list);
};
const del = (i) => {
  data.list.splice(i, 1);
};
// const num = computed({
//   num1: () => {
//     let a = 0;
//     let carlist = data.list.filter((item) => item.flag == false);
//     console.log(carlist);
//     a=carlist.length
//     return a;
//   },
// });
const num =computed(()=>{
  data.numList = data.list.filter((item) => item.flag == false);
})
</script>
<style lang="scss" scoped>
.todo {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  padding-top: 30px;
  .p {
    font-size: 65px;
    color: #ead7d7;
    text-align: center;
  }
  .todolist {
    width: 500px;
    background-color: white;
    position: absolute;
    left: 30%;
    top: 25%;
    // transform: translate(-50%, -50%);
    .top {
      position: relative;
      span {
        position: absolute;
        top: 10px;
        left: 10px;
        transform: rotate(90deg);
        font-size: 20px;
        color: gainsboro;
      }
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      input {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 30px;
        box-sizing: border-box;
        border: none;
      }
    }
    .content {
      height: 40px;
      width: 100%;
      padding-right: 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6;
      input {
        width: 25px;
        height: 25px;
        margin: 0 10px;
        vertical-align: middle;
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      height: 40px;
      width: 100%;
      line-height: 40px;
      color: #848684;
      font-size: 14px;
      p {
        width: 35%;
        padding-left: 20px;
      }
      .right {
        display: flex;
        flex: 1;
        .btn {
          width: 35px;
          height: 30px;
          border-radius: 5px;
          background: white;
          box-sizing: border-box;
          color: #848684;
          border: 1px solid #ead7d7;
          margin-top: 5px;
        }
        .active {
          margin: 0 20px !important;
        }
      }
    }
  }
}

::-webkit-input-placeholder {
  /*Webkit browsers*/
  color: #e6e6e6;
  font-size: 26px;
  line-height: 40px;
}
</style>